<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
      .box {
        position: relative;
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        width: 280px;
        height: 22px;
        overflow-y: hidden;
      }

      .open {
        position: absolute;
        bottom: 0;
        left: 250px;
        background-color: aquamarine;
        color: black;
      }
      .box-item {
       max-width: 100%;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
      }

      .red {
        background-color: red;
      }
      .blue {
        background-color: blue;
      }
    </style>
  </head>
  <body>
   <div style="position: relative;">
    <div class="box">
       <div class="box-item red">知乎互联网高质量的高质量的</div>
       <div class="box-item blue">知乎,中网高质量的量的</div>
       <div class="box-item red">知乎,中文</div>
       <div class="box-item blue">知乎,中文的问答社区和创作</div>
       <!-- <div class="box-item blue">知乎,中文互联网高质量的问答社区和创作者聚集的原创内容平台</div> -->
    </div>
    <div class="open"> 展开 </div>
  </div>
    <script>
       var box = document.querySelector('.box')
       var items = document.querySelectorAll('.box-item')
       var open = document.querySelector('.open')
       
       var t = 0
       var index = 0 // 默认第一个
       for (let i =0; i< items.length; i++) {
          t = t + items[i].clientWidth;
          if (t >= 280  && i > 0) {
            index = i
          }
       }
   
       if (index > 0) {
        open.style.display = 'block'
       } else {
        open.style.display = 'none'
       }
       
       // 展开按钮点击
       open.onclick = function () {
        console.log('22')
        var lines = Math.ceil (t/280);
        var boxHeight = box.clientHeight;
        if (boxHeight == 22) {
          box.style.height = (22 * lines) + 'px' ;
          open.innerHTML = '收起'
          open.style.bottom = '-22px'
        } else {
          box.style.height = '22px' ;
          open.innerHTML = '展开'
          open.style.bottom = '0'
        }
   
       
      }

    </script>
  </body>
</html>